<template>
        <div class="respond-tab">
            <div class="respond-tab-item" v-for="(item, i) in buttonList">
                <button class="respond-tab-bt" @click="emitButton(item.param, i)">
                    <div class="respond-tab-content">
                        <i class="respond-tab-icon respond-tab-icon-first" v-html="item.svg"></i>
                        <i class="respond-tab-icon respond-tab-icon-second" v-html="item.svg"></i>
                    </div>
                    <div class="respond-tab-text">
                        <span :data-text="item.title">{{ item.title }}</span>
                    </div>
                </button>
            </div>
        </div>
</template>

<script>

export default {
    name: "RespondTabBar",
    props: ["buttons"],
    emits: ["buttonDown"],
    components: {},
    data() {
        return {
            buttonList: [
                {
                    title: "Home",
                    param: "Home",
                    svg: `<svg  viewBox="0 0 1024 1024">
    <path
        d="M783.189333 942.208h-112.384a61.952 61.952 0 0 1-62.592-61.098667v-182.442666a21.802667 21.802667 0 0 0-23.296-21.333334H434.773333a21.845333 21.845333 0 0 0-23.338666 21.333334v182.485333a61.184 61.184 0 0 1-61.056 61.056H239.658667a61.184 61.184 0 0 1-61.056-61.098667v-370.730666H110.634667a25.258667 25.258667 0 0 1-18.517334-42.666667l401.152-364.928a26.112 26.112 0 0 1 37.034667 0l398.464 362.197333a25.258667 25.258667 0 0 1-15.786667 45.354667h-68.266666v370.730667a61.482667 61.482667 0 0 1-61.525334 61.141333z m-355.712-333.994667h164.650667a73.984 73.984 0 0 1 73.728 73.941334l1.621333 188.373333a11.818667 11.818667 0 0 0 12.074667 10.581333h86.784a10.837333 10.837333 0 0 0 11.093333-10.581333l-1.493333-385.408a23.765333 23.765333 0 0 1 7.424-17.066667 25.6 25.6 0 0 1 17.792-8.064h35.370667l-324.778667-284.458666-324.650667 284.330666h35.328a25.258667 25.258667 0 0 1 25.258667 25.301334v385.450666a10.538667 10.538667 0 0 0 10.538667 10.538667h84.864a10.581333 10.581333 0 0 0 10.538666-10.581333v-188.373334a73.984 73.984 0 0 1 73.856-73.984z"></path>
</svg>`,
                },
                {
                    title: "Profile",
                    param: "Profile",
                    svg: `<svg viewBox="0 0 1024 1024">
    <path
        d="M864.896 523.04a259.84 259.84 0 0 0-58.656-36.448 153.952 153.952 0 0 0 51.424-113.12c-1.6-80.928-75.904-118.88-115.2-128a24 24 0 0 0-28.512 17.248 22.656 22.656 0 0 0 17.664 27.616c0.8 0.384 76.32 18.016 77.92 84a116.416 116.416 0 0 1-64 98.56 22.752 22.752 0 0 0-13.248 23.392 23.264 23.264 0 0 0 18.88 19.552c7.232 1.152 170.304 39.104 150.208 230.88a20.608 20.608 0 0 0 6.016 17.632 24.64 24.64 0 0 0 42.176-13.024 245.056 245.056 0 0 0-84.672-228.288z m-592.384-6.912a23.712 23.712 0 0 0 18.88-19.552 22.752 22.752 0 0 0-13.248-23.392 115.68 115.68 0 0 1-64.256-98.56c1.216-65.184 74.72-83.2 78.336-84a23.04 23.04 0 0 0 17.664-28 24.256 24.256 0 0 0-29.312-16.864c-38.4 8.832-112.864 46.784-114.88 128a154.272 154.272 0 0 0 51.744 113.216 259.744 259.744 0 0 0-58.656 36.448A244.928 244.928 0 0 0 74.432 752a24.064 24.064 0 0 0 26.112 19.552 23.264 23.264 0 0 0 21.696-24.16c-19.68-192 143.392-229.728 150.208-231.264zM925.536 775.136a26.848 26.848 0 0 1-20.384-8.64 23.776 23.776 0 0 1-6.88-20.256c20.096-192-145.856-227.2-147.552-227.2a26.624 26.624 0 0 1-21.536-22.4 25.792 25.792 0 0 1 15.104-26.72 113.6 113.6 0 0 0 61.984-95.584 87.808 87.808 0 0 0-74.976-80.768h-0.48a26.56 26.56 0 0 1-16.992-11.904 24.96 24.96 0 0 1-3.008-19.616 26.272 26.272 0 0 1 11.776-16 26.656 26.656 0 0 1 20.64-3.488 178.336 178.336 0 0 1 73.12 37.856 124.8 124.8 0 0 1 44.576 93.28 156.192 156.192 0 0 1-49.024 112.256 263.104 263.104 0 0 1 55.104 34.912 248.896 248.896 0 0 1 85.888 230.976 26.816 26.816 0 0 1-27.36 23.296zM732.704 287.264h0.288a139.136 139.136 0 0 1 41.76 19.552 83.2 83.2 0 0 1 37.888 67.2 120.416 120.416 0 0 1-65.664 101.504 19.456 19.456 0 0 0-11.488 20.128 20.128 20.128 0 0 0 16.32 16.832 210.528 210.528 0 0 1 86.848 44.8 187.104 187.104 0 0 1 51.744 71.328 242.4 242.4 0 0 1 14.208 118.4 17.472 17.472 0 0 0 5.056 15.008l0.192 0.192a21.44 21.44 0 0 0 36.608-11.232 242.752 242.752 0 0 0-83.584-225.376 256.832 256.832 0 0 0-57.92-36l-4.352-1.952 3.488-3.2a151.328 151.328 0 0 0 50.4-110.752 117.184 117.184 0 0 0-42.4-88.576 171.648 171.648 0 0 0-70.4-36.448 20.8 20.8 0 0 0-24.672 14.784 18.72 18.72 0 0 0 2.24 14.784 20.128 20.128 0 0 0 12.96 9.024zM98.304 774.976a27.296 27.296 0 0 1-27.008-22.4v-0.192A248.16 248.16 0 0 1 156.8 520.992a262.912 262.912 0 0 1 55.072-34.912 156.576 156.576 0 0 1-49.408-112.256c2.048-82.976 77.664-122.08 117.344-131.2a29.28 29.28 0 0 1 6.592-0.768 27.168 27.168 0 0 1 26.528 19.936 25.6 25.6 0 0 1-2.88 19.584 27.168 27.168 0 0 1-17.152 12.32c-0.832 0.16-74.688 16.576-75.872 80.928a112 112 0 0 0 62.4 95.584 25.792 25.792 0 0 1 15.104 26.72 27.04 27.04 0 0 1-21.344 22.4 209.728 209.728 0 0 0-83.68 43.456 181.376 181.376 0 0 0-50.08 68.928 237.056 237.056 0 0 0-13.984 115.424 26.624 26.624 0 0 1-24.576 27.68c-0.832 0.16-1.696 0.16-2.56 0.16z m-20.672-23.296a20.928 20.928 0 0 0 22.656 16.8 20.192 20.192 0 0 0 18.784-20.768 243.2 243.2 0 0 1 14.432-118.4 187.712 187.712 0 0 1 51.84-71.328 216.704 216.704 0 0 1 86.4-44.8 20.64 20.64 0 0 0 16.416-16.832 19.424 19.424 0 0 0-11.424-20.096 119.04 119.04 0 0 1-66.144-101.536c1.28-69.408 80-86.912 80.864-87.072a20.768 20.768 0 0 0 13.088-9.408 19.2 19.2 0 0 0 2.144-14.688 20.768 20.768 0 0 0-20.352-15.136 22.88 22.88 0 0 0-5.152 0.608c-38.016 8.704-110.432 46.016-112.384 125.056a151.84 151.84 0 0 0 50.816 110.72l3.488 3.2-4.352 1.952a256.768 256.768 0 0 0-57.92 36 241.984 241.984 0 0 0-83.2 225.6zM800.672 768.832a261.6 261.6 0 0 0-84.096-197.216 276.512 276.512 0 0 0-106.24-65.856 193.952 193.952 0 0 0 80.352-159.04 177.792 177.792 0 1 0-354.752 0 193.344 193.344 0 0 0 79.584 158.24 278.144 278.144 0 0 0-108.48 66.272 261.632 261.632 0 0 0-84.096 197.216c0 4.032-0.384 8.832-0.384 13.664a94.4 94.4 0 0 0 14.272 67.488 52.96 52.96 0 0 0 41.312 17.28c29.664 0.416 228.608 0.416 390.4 0.416h81.824a48.64 48.64 0 0 0 38.656-15.68 87.84 87.84 0 0 0 13.152-65.856 262.784 262.784 0 0 1-1.504-16.928zM380.864 347.136a132.448 132.448 0 1 1 132.16 141.376 136.928 136.928 0 0 1-132.16-141.376zM755.52 818.272a14.528 14.528 0 0 1-6.4 0.8h-81.088c-132.16 0-358.88 0-389.664-0.416-5.632 0-8.256-1.216-9.024-2.4a80.992 80.992 0 0 1-2.24-31.744c0.384-5.216 0.384-10.432 0.384-15.68 0-142.976 102.848-230.4 244-230.4s244.032 87.552 244.032 230.4c0 6.4 0.384 13.248 0.736 19.2a86.4 86.4 0 0 1-0.64 30.208zM750.336 870.368h-81.824c-160.736 0-360.8 0-390.4-0.416a56.128 56.128 0 0 1-43.648-18.336 94.496 94.496 0 0 1-15.168-67.648v-2.08c0-2.464 0-5.024 0.192-7.456s0.16-4.224 0.16-6.08a264.608 264.608 0 0 1 85.024-199.456 280.576 280.576 0 0 1 103.904-65.056 196.48 196.48 0 0 1-75.936-157.184 199.808 199.808 0 0 1 52.992-136.32 174.208 174.208 0 0 1 127.392-56.832 188 188 0 0 1 180.768 193.184 196.864 196.864 0 0 1-76.8 158.048 282.144 282.144 0 0 1 101.664 64.608 264.608 264.608 0 0 1 85.056 199.36c0.384 5.568 0.736 10.688 1.472 16.576V787.744a87.392 87.392 0 0 1-14.048 65.92 51.52 51.52 0 0 1-40.8 16.704z m-237.28-710.4a167.84 167.84 0 0 0-122.72 54.816 193.408 193.408 0 0 0-51.2 131.968 189.536 189.536 0 0 0 78.208 155.616l5.216 3.68-6.048 1.984a273.856 273.856 0 0 0-107.264 65.504 258.624 258.624 0 0 0-83.2 194.912c0 1.984 0 4.096-0.192 6.4s-0.192 4.864-0.192 7.328v2.176a88.32 88.32 0 0 0 13.568 63.2 49.984 49.984 0 0 0 38.88 16c29.664 0.416 229.696 0.416 390.4 0.416h81.824a45.44 45.44 0 0 0 36.256-14.56 81.504 81.504 0 0 0 12.48-61.344v-2.144a304 304 0 0 1-1.504-16.928v-0.224a258.656 258.656 0 0 0-83.2-194.944 275.008 275.008 0 0 0-105.056-65.056l-6.016-2.016 5.184-3.648a189.952 189.952 0 0 0 78.976-156.416 181.6 181.6 0 0 0-174.368-186.72z m236.16 662.4h-81.088c-134.24 0-358.912 0-389.728-0.416-5.952 0-9.856-1.248-11.552-3.712a66.944 66.944 0 0 1-2.88-33.344v-0.416c0.384-5.216 0.384-10.464 0.384-15.552a224.992 224.992 0 0 1 70.112-171.264 282.208 282.208 0 0 1 354.208 0 224.992 224.992 0 0 1 70.112 171.264c0 6.24 0.352 12.8 0.736 19.2 1.984 23.488 0.288 29.504-1.184 32l-0.416 0.544c-0.576 0.384-1.664 1.696-8.704 1.696z m-477.152-7.936a13.056 13.056 0 0 0 6.4 1.024c30.816 0.416 255.456 0.416 389.664 0.416h81.088a30.304 30.304 0 0 0 4-0.224 92.8 92.8 0 0 0 0-27.232c-0.384-6.4-0.768-13.12-0.768-19.552a218.752 218.752 0 0 0-68.032-166.4 275.84 275.84 0 0 0-345.6 0 218.752 218.752 0 0 0-68.032 166.4c0 5.184 0 10.56-0.384 16v0.288a77.152 77.152 0 0 0 1.504 29.152z m241.024-322.72a144.896 144.896 0 0 1 0-289.152 144.896 144.896 0 0 1 0 289.152z m0-282.752a138.496 138.496 0 1 0 128.96 138.176 133.952 133.952 0 0 0-128.96-138.176z"></path>
</svg>`,
                },
                {
                    title: "Photos",
                    param: "Photos",
                    svg: `<svg viewBox="0 0 1024 1024">
    <path
        d="M910.469565 184.765217l-111.304348 0c-2.226087-6.678261-13.356522-33.391304-20.034783-44.521739-15.582609-33.391304-26.713043-48.973913-60.104348-48.973913L307.2 91.269565c-33.391304 0-46.747826 13.356522-66.782609 62.330435-4.452174 11.130435-11.130435 26.713043-13.356522 31.165217L113.530435 184.765217C51.2 184.765217 0 235.965217 0 298.295652l0 518.678261c0 62.330435 51.2 113.530435 113.530435 113.530435l796.93913 0c62.330435 0 113.530435-51.2 113.530435-113.530435L1024 298.295652C1024 235.965217 972.8 184.765217 910.469565 184.765217L910.469565 184.765217zM42.295652 298.295652c0-40.069565 31.165217-71.234783 71.234783-71.234783l122.434783 0c15.582609 0 20.034783-6.678261 24.486957-13.356522 6.678261-13.356522 8.904348-22.26087 13.356522-31.165217 2.226087-4.452174 4.452174-11.130435 6.678261-15.582609 0 0 0-2.226087 2.226087-4.452174 4.452174-8.904348 11.130435-26.713043 26.713043-26.713043l411.826087 0c13.356522 0 17.808696 8.904348 22.26087 17.808696l0 2.226087c2.226087 6.678261 6.678261 13.356522 11.130435 22.26087 6.678261 15.582609 13.356522 31.165217 15.582609 35.617391 4.452174 8.904348 11.130435 13.356522 20.034783 13.356522l124.66087 0c40.069565 0 71.234783 31.165217 71.234783 71.234783l0 518.678261c0 40.069565-31.165217 71.234783-71.234783 71.234783L113.530435 888.208696c-40.069565 0-71.234783-31.165217-71.234783-71.234783L42.295652 298.295652 42.295652 298.295652 42.295652 298.295652zM42.295652 298.295652M512 790.26087c129.113043 0 233.73913-104.626087 233.73913-233.73913 0-129.113043-104.626087-233.73913-233.73913-233.73913s-233.73913 104.626087-233.73913 233.73913C280.486957 687.86087 382.886957 790.26087 512 790.26087L512 790.26087zM512 365.078261c106.852174 0 191.443478 86.817391 191.443478 191.443478 0 106.852174-86.817391 191.443478-191.443478 191.443478s-191.443478-86.817391-191.443478-191.443478C320.556522 451.895652 405.147826 365.078261 512 365.078261L512 365.078261zM512 365.078261M812.521739 367.304348l51.2 0c11.130435 0 20.034783-8.904348 20.034783-20.034783 0-11.130435-8.904348-20.034783-20.034783-20.034783l-51.2 0c-11.130435 0-20.034783 8.904348-20.034783 20.034783C790.26087 358.4 801.391304 367.304348 812.521739 367.304348L812.521739 367.304348zM812.521739 367.304348"></path>
</svg>`,
                },
                {
                    title: "Videos",
                    param: "Videos",
                    svg: `<svg viewBox="0 0 1024 1024">
    <path
        d="M994.437707 273.119401l0 448.914196c0 7.193843-3.796466 13.876032-9.977235 17.570167s-13.855566 3.857864-20.200064 0.440022l-265.261433-142.833079c-9.946536-5.351891-13.671371-17.764596-8.319479-27.721365 5.362124-9.946536 17.774829-13.671371 27.731598-8.319479l235.094366 126.59321 0-380.38338-235.094366 126.59321c-6.344498 3.417843-14.019295 3.243881-20.200064-0.450255-6.191003-3.694135-9.977235-10.366092-9.977235-17.570167l0-203.985858L76.214822 211.966623l0 571.219753 632.485095 0c11.307533 0 20.466124 9.15859 20.466124 20.466124 0 11.2973-9.15859 20.466124-20.466124 20.466124L55.748698 824.118624c-11.307533 0-20.466124-9.168824-20.466124-20.466124l0-612.152001c0-11.307533 9.15859-20.466124 20.466124-20.466124l652.951219 0c11.307533 0 20.466124 9.15859 20.466124 20.466124l0 190.19169 235.094366-126.59321c6.344498-3.417843 14.019295-3.243881 20.200064 0.450255C990.641241 259.243369 994.437707 265.915325 994.437707 273.119401z"></path>
</svg>`,
                },
                {
                    title: "Setting",
                    param: "Setting",
                    svg: `<svg viewBox="0 0 1024 1024">
    <path
        d="M930.88 463.968l-80.416-44.352c-32.448-15.616-46.432-35.616-33.536-82.24l25.696-88.864c4.768-20.608 7.232-32.256-1.248-40.736l-25.92-25.92c-9.472-9.472-22.56-4.864-40.736-1.248l-88.096 25.536C646.016 216 625.984 208 604.736 171.872L560 90.72c-11.2-17.92-17.728-27.904-29.696-27.904l-36.64 0c-13.376 0-19.392 12.512-29.696 27.936L416 166.016c-16 33.984-46.016 41.984-88 32L248.544 178.976C227.936 174.208 216.32 171.712 207.84 180.224l-25.92 25.92C172.48 215.584 177.056 228.672 180.672 246.848l25.504 88.128c13.824 43.008-2.176 67.008-34.304 81.856l-81.152 44.736c-17.92 11.2-27.904 17.728-27.904 29.696l0 36.64c0 13.376 12.512 19.392 27.936 29.696l80.416 44.352C208 624 216 644 204.704 684.192l-25.728 88.832c-4.768 20.608-7.232 32.256 1.248 40.736l25.92 25.92c9.472 9.472 22.56 4.864 40.736 1.248l88.128-25.504c37.024-11.424 65.024-1.44 81.856 34.304l44.736 81.152c11.2 17.92 17.728 27.904 29.696 27.904l36.64 0c13.376 0 19.392-12.512 29.696-27.936l44.352-80.416c18.048-32.448 46.048-42.432 82.24-33.536l88.864 25.696c20.608 4.768 32.256 7.232 40.736-1.248l25.92-25.92c9.472-9.472 4.864-22.56 1.248-40.736l-25.504-88.128c-11.456-36.576-1.472-62.56 34.304-81.856l81.152-44.736c17.888-11.168 27.872-17.696 27.872-29.664l0-36.64C958.784 480.288 946.272 474.272 930.88 463.968zM892 514.72c0 6.272-5.216 9.664-14.592 15.52l-106.08 58.496c-21.312 11.264-31.328 27.264-24.064 56.16l33.184 114.72c1.888 9.504 4.288 16.352-0.64 21.28l-2.24 2.24c-4.416 4.416-10.528 3.136-21.28 0.64l-116.224-33.6c-26.048-6.176-46.048 1.824-56.8 22.592l-57.696 104.672c-5.376 8.064-8.512 14.592-15.52 14.592L506.88 892.032c-6.272 0-9.664-5.216-15.52-14.592l-58.496-106.08c-8.864-19.36-30.848-29.376-56.16-24.064L261.984 780.48c-9.504 1.888-16.352 4.288-21.28-0.64l-2.24-2.24c-4.416-4.416-3.136-10.528-0.64-21.28l33.6-116.224c6.592-24.096-3.424-44.096-22.592-56.8l-104.672-57.696c-8.064-5.376-14.592-8.512-14.592-15.52l0-3.168c0-6.272 5.216-9.664 14.592-15.52l106.08-58.496c17.76-8.896 29.76-34.912 24.064-56.16L241.152 262.016c-1.888-9.504-4.288-16.352 0.64-21.28l2.24-2.24c4.416-4.416 10.528-3.136 21.28-0.64l106.624 24c24.032 3.488 42.048-2.848 56.8-22.592l67.296-95.072c5.376-8.064 8.512-14.592 15.52-14.592l3.168 0c6.272 0 9.664 5.216 15.52 14.592l61.696 99.68c11.232 17.728 33.248 29.728 54.4 22.976l112.704-27.104c9.504-1.888 16.352-4.288 21.28 0.64l2.24 2.24c4.416 4.416 3.136 10.528 0.64 21.28l-33.696 116.48c-5.536 23.616 17.6 37.632 23.232 57.984l104.672 57.696c8.064 5.376 14.592 8.512 14.592 15.52l0 3.168L892 514.752zM510.784 350.784c-88.352 0-160 71.648-160 160s71.648 160 160 160 160-71.648 160-160S599.136 350.784 510.784 350.784zM510.784 606.784c-53.024 0-96-42.976-96-96s42.976-96 96-96 96 42.976 96 96S563.808 606.784 510.784 606.784z"></path>
</svg>`,
                },
            ],
        }
    },
    computed: {

    },
    methods: {
        emitButton(param, index) {
            this.$emit("buttonDown", param);
        },
        //初始化标签栏
        initBar(buttonList) {
        }
    },
    created() {
        if (this.$props.buttons) {
            this.buttonList = this.$props.buttons;
        }
        this.initBar(this.buttonList);
    },
    mounted() {

    },
    beforeUnmount() {
    },
}
</script>

<style scoped>
.respond-tab {
    position: relative;
    padding: 30px 0;
    background-color: #fff;
    display: flex;
    border-radius: 20px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
}

.respond-tab-item {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.respond-tab-bt {
    padding: 0 40px;
    background-color: transparent;
    border: none;
}

.respond-tab-content {
    min-width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    overflow: hidden;
}

.respond-tab-icon {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.5s;
}

.respond-tab-icon-second {
    fill:#2196f3;
    stroke: #2196f3;
    transform: translateY(-200%);
}

.respond-tab-bt:hover .respond-tab-icon-first {
    transform: translateY(100%);
}

.respond-tab-bt:hover .respond-tab-icon-second {
    transform: translateY(-100%);
}

.respond-tab-bt>.respond-tab-text {
    position: relative;
    height: 20px;
    width: 100%;
    display: block;
    overflow: hidden;
    text-transform: uppercase;
    font-weight: 500;
}

.respond-tab-bt>.respond-tab-text>span {
    display: block;
    position: relative;
    color: #222;
    font-size: 15px;
    line-height: 20px;
    transition: 0.5s;
}

.respond-tab-bt>.respond-tab-text>span::before {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    color: #2196f3;
}

.respond-tab-bt:hover>.respond-tab-text>span {
    transform: translateY(-20px);
}
</style>
